iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
自我挑戰組

自學vue~點亮Roadmap過程系列 第 23

vue3鍊成術第二十三天-事件處理(2)

  • 分享至 

  • xImage
  •  

事件處理(2)

事件修飾符

在處理事件時調用 event.preventDefault() 或 event.stopPropagation() 是很常見的。儘管我們可以直接在方法內調用,但如果方法能更專注於數據邏輯而不用去處理 DOM 事件的細節會更好。

為解決這一問題,Vue 為 v-on 提供了事件修飾符。修飾符是用 . 表示的指令後綴,包含以下這些:

  • .stop
  • .prevent
  • .self
  • .capture
  • .once
  • .passive
<!-- 單擊事件將停止傳遞 -->
<a @click.stop="doThis"></a>

<!-- 提交事件將不再重新加載頁面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修飾語可以使用鏈式書寫 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修飾符 -->
<form @submit.prevent></form>

<!-- 僅當 event.target 是元素本身時才會觸發事件處理器 -->
<!-- 例如:事件處理器不來自子元素 -->
<div @click.self="doThat">...</div>

注意
使用修飾符時需要注意調用順序,因為相關代碼是以相同的順序生成的。因此使用 @click.prevent.self 會阻止元素及其子元素的所有點擊事件的默認行為,而 @click.self.prevent 則只會阻止對元素本身的點擊事件的默認行為。

.capture、.once 和 .passive 修飾符與原生 addEventListener 事件相對應:

<!-- 添加事件監聽器時,使用 `capture` 捕獲模式 -->
<!-- 例如:指向內部元素的事件,在被內部元素處理前,先被外部處理 -->
<div @click.capture="doThis">...</div>

<!-- 點擊事件最多被觸發一次 -->
<a @click.once="doThis"></a>

<!-- 滾動事件的默認行為 (scrolling) 將立即發生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

.passive 修飾符一般用於觸摸事件的監聽器,可以用來改善移動端設備的滾屏性能。
注意
請勿同時使用 .passive 和 .prevent,因為 .passive 已經向瀏覽器表明了你不想阻止事件的默認行為。如果你這麼做了,則 .prevent 會被忽略,並且瀏覽器會拋出警告。

按鍵修飾符

在監聽鍵盤事件時,我們經常需要檢查特定的按鍵。Vue 允許在 v-on 或 @ 監聽按鍵事件時添加按鍵修飾符。

<!-- 僅在 `key` 為 `Enter` 時調用 `submit` -->
<input @keyup.enter="submit" />

你可以直接使用 KeyboardEvent.key 暴露的按鍵名稱作為修飾符,但需要轉為 kebab-case 形式。

<input @keyup.page-down="onPageDown" />

在上面的例子中,僅會在 $event.key 為 'PageDown' 時調用事件處理。

按鍵別名

Vue 為一些常用的按鍵提供了別名:

  • .enter
  • .tab
  • .delete (捕獲“Delete”和“Backspace”兩個按鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系統按鍵修飾符

你可以使用以下系統按鍵修飾符來觸發鼠標或鍵盤事件監聽器,只有當按鍵被按下時才會觸發。

  • .ctrl
  • .alt
  • .shift
  • .meta

注意
在 Mac 鍵盤上,meta 是 Command 鍵 (⌘)。在 Windows 鍵盤上,meta 鍵是 Windows 鍵 (⊞)。在 Sun 微機系統鍵盤上,meta 是鑽石鍵 (◆)。在某些鍵盤上,特別是 MIT 和 Lisp 機器的鍵盤及其後代版本的鍵盤,如 Knight 鍵盤,space-cadet 鍵盤,meta 都被標記為“META”。在 Symbolics 鍵盤上,meta 也被標識為“META”或“Meta”。

舉例:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 點擊 -->
<div @click.ctrl="doSomething">Do something</div>

注意
系統按鍵修飾符和常規按鍵不同。與 keyup 事件一起使用時,該按鍵必須在事件發出時處於按下狀態。換句話說,keyup.ctrl 只會在你仍然按住 ctrl 但鬆開了另一個鍵時被觸發。若你單獨鬆開 ctrl 鍵將不會觸發。

.exact 修飾符

.exact 修飾符允許精確控制觸發事件所需要的系統修飾符的組合。

<!-- 當按下 Ctrl 時,即使同時按下 Alt 或 Shift 也會觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 僅當按下 Ctrl 且未按任何其他鍵時才會觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 僅當沒有按下任何系統按鍵時觸發 -->
<button @click.exact="onClick">A</button>

鼠標按鍵修飾符

.left
.right
.middle
這些修飾符將處理程序限定為由特定鼠標按鍵觸發的事件。


上一篇
vue3鍊成術第二十二天-事件處理(1)
下一篇
vue3鍊成術第二十四天-表單輸入綁定(1)
系列文
自學vue~點亮Roadmap過程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言